import React, { Component } from 'react';
const colors = ['#F50057', '#EF9A9A', '#2196F3', '#757575', '#616161']
class HotRankingAlbum extends Component {

    constructor(props, context) {
        super(props, context);

        this.handleRankingAlbum = this.handleRankingAlbum.bind(this)

        let album = this.props.album
        let index = this.props.index
        this.state = {
            album: album,
            index: index,
        }
    }

    handleRankingAlbum() {
        let index = this.state.index
        this.props.handleRankingAlbum(index)
    }

    render() {
        return (
            <div style={{width:"100%",height:"57px",background:'#eeeeee'}}>
                <div style={{ display: 'flex', width: '100%', height: '56px',background:'white'}} onClick={this.handleRankingAlbum}>
                    <div style={{ width: '48px', height: '56px', justifyContent: 'center', alignItems: 'center', display: 'flex' }}>
                        <p style={{ color: colors[this.state.index], fontSize: '15px', margin: 'auto' }}>{this.state.index + 1}</p>
                    </div>
                    <div style={{ width: '100%', height: '56px', display: 'flex' }}>
                        <div style={{ width: '56px', height: '100%', justifyContent: 'center', alignItems: 'center', display: 'flex' }}>
                            <img src={this.state.album.img_url} style={{ width: '36px', height: '36px', borderRadius: '5px' }} alt='' />
                        </div>
                        <div style={{ width: '100%', height: '100%', marginLeft: '10px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                            <p style={{ fontSize: '13px', color: '#424242', marginTop: '10px', marginBottom: '5px' }}>{this.state.album.name}</p>
                            <span style={{ fontSize: '11px', color: '#BDBDBD' }}>{this.state.album.count}首</span>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default HotRankingAlbum;